<template>
  <a-layout-header id="header" class="header-container" :class="{ 'header-sticky': isSticky }">

    <section class="header" :style="{ 'background-color': isNavStatus ? '#fff' : 'transparent' }">
      <!-- 移动端菜单按钮 -->
      <div v-if="isMobile" class="mobile-menu" @click="showDrawer">
        <MenuOutlined :style="{ fontSize: '22px' }" />
      </div>

      <!-- PC端logo -->
      <router-link to="/" class="logo-container" v-if="!isMobile">
        <img :src="currentLogo" style="width: 140px;" alt="logo" />
      </router-link>
      <!-- 移动端logo -->
      <router-link to="/" class="logo-container1" v-else>
        <img :src="currentLogo" style="width: 140px;" alt="logo" />
      </router-link>

      <!-- 导航条 -->
      <Navigation ref="navigationRef" :menuItems="navigationData" :isSticky="isSticky" @hover-change="handleNavHover" />

      <!-- PC端右侧菜单 -->
      <div v-if="!isMobile" class="header-right">
        <a-space :size="15">

          <!-- 搜索 -->
          <div class="search-icon" @click="openSearchPanel">
            <SearchOutlined :style="{ fontSize: '22px', transform: 'translateY(4px)', color: textColor }" />
          </div>

          <!-- 用户信息 -->
          <template v-if="isLogin">
            <a-dropdown>
              <UserOutlined :style="{ fontSize: '22px', marginRight: '20px', color: textColor }" />
              <template #overlay>
                <section class="user-info">
                  <div class="user-info-top">
                    <UserOutlined :style="{ fontSize: '22px', marginRight: '10px' }" />
                    <!-- 跳转个人中心 -->
                    <div @click="goToUserInfo">VIEW ACCOUNT SUMMARY</div>
                  </div>
                  <div class="user-info-bottom">
                    <div>NOT {{ userInfo.last_name.toUpperCase() }}?</div>
                    <a class="common-btn" @click="handleLogout">SIGN OUT</a>
                  </div>
                </section>
              </template>
            </a-dropdown>
          </template>
          <template v-else>
            <!-- placement="bottom" -->
            <a-tooltip title="Login">
              <UserOutlined :style="{ fontSize: '22px', marginRight: '20px', color: textColor }" @click="goToLogin" />
            </a-tooltip>
          </template>

          <!-- 收藏 -->
          <div class="start-collect" style="margin-right: 20px;" @click="goToFavourites">
            <a-badge :dot="true">
              <HeartOutlined :style="{ fontSize: '22px', color: textColor }" />
            </a-badge>
          </div>

          <!-- 购物车 -->
          <section class="collect">
            <a-dropdown v-if="!isMobile" v-model:open="cartVisible">
              <span>
                <ShoppingCartOutlined :style="{ fontSize: '22px', marginRight: '20px', color: textColor }" />
              </span>
              <template #overlay>
                <div class="dropdown-menu-item-group">
                  <div class="cart-header"><span>{{ shopCartTotal }}</span> ITEM IN BAG</div>
                  <section class="cart-item-list">
                    <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
                      <div class="item-image">
                        <img :src="item.image" alt="GINA DRESS" />
                      </div>
                      <div class="item-details">
                        <div class="item-name">Duonin</div>
                        <div class="item-description">
                          {{ item.name }}
                        </div>
                        <div class="item-size">SIZE: {{ item.size }}</div>
                        <div class="item-quantity">QUANTITY: {{ item.num }}</div>
                      </div>
                      <div class="item-price">{{ currencyStore.currentCurrency.unit }}{{ proxy.$ConvertPrice(item.price)
                      }}</div>
                    </div>
                  </section>
                  <div class="cart-total">
                    <div class="total-row">
                      <span>TOTAL</span>
                      <span>{{ currencyStore.currentCurrency.unit }}{{ proxy.$ConvertPrice(cartTotal) }}</span>
                    </div>
                  </div>
                  <div class="cart-actions">
                    <a class="view-bag" @click="handleCartClick">VIEW BAG && CHECKOUT</a>
                  </div>
                </div>
              </template>
            </a-dropdown>
            <span v-else>
              <ShoppingCartOutlined :style="{ fontSize: '22px', marginRight: '20px' }" @click="handleCartClick" />
            </span>
          </section>

          <!-- 汇率 -->
          <section class="language-select">
            <a-dropdown v-model:open="visible" trigger="click">
              <span style="position: relative;bottom: -5px;">
                <!-- <img width="22" height="22" style="position: relative;bottom: 6px;" :style="{ 'color': textColor }"
                  src="@/assets/images/gb.png" alt="" srcset=""> -->
                  <svg t="1748566909023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4840" width="26" height="26"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448-200.6-448-448-448zM362.5 158.1c27.4-11.5 55.8-19.8 84.9-24.7C409.8 162 376.6 196.3 348.7 235.2c-21.8-9.2-43-20.4-63.2-33.4 23.8-17.5 49.6-32.1 77-43.7zM158.2 362.5c19.3-45.7 47-86.7 82.3-122l0.9-0.9C265.7 256.5 291.6 271 318.6 283c-34 61.8-53.7 130.1-57.8 201H129c3-42 12.8-82.7 29.2-121.5z m82.3 421c-35.3-35.3-63-76.3-82.3-122C141.8 622.7 132 582 129 540h131.8c4.1 70.8 23.8 139.2 57.8 200.9-27 12-52.8 26.6-77.2 43.5l-0.9-0.9z m122 82.3c-27.4-11.5-53.1-26.2-76.9-43.6 20.2-13 41.3-24.1 63.1-33.4 27.9 39 61.1 73.2 98.6 101.8-29.1-4.9-57.4-13.2-84.8-24.8zM484 848.3c-30.3-22.6-57.2-49-80-78.4 26-6.8 52.7-11.2 80-13v91.4z m0-308.3v160.8c-38.4 2.2-76.1 9-112.7 20.3-31.1-54.4-50.1-116.1-54.4-181.2H484v0.1z m0-56H316.9c4.3-65 23.3-126.7 54.5-181.1C407.9 314.2 445.6 321 484 323.2V484z m0-216.9c-27.3-1.8-54-6.1-79.9-13 22.8-29.4 49.7-55.8 79.9-78.4v91.4zM783.5 240.6c35.3 35.2 63 76.2 82.3 121.9C882.2 401.3 892 442 895 484H763.2c-4.1-70.9-23.8-139.2-57.8-200.9 27-12 52.8-26.5 77.2-43.4l0.9 0.9zM661.4 158.2c27.5 11.5 53.2 26.2 77 43.6-20.2 13-41.3 24.2-63.2 33.4-26.4-36.9-57.9-69.8-93.6-97.8-1.7-1.4-3.5-2.7-5.2-4 29.1 4.9 57.6 13.2 85 24.8zM540 176.2c29.8 22.5 56.4 48.9 79.1 78.1-25.7 6.7-52.1 11-79.1 12.8v-90.9z m0 147c38.1-2.2 75.5-8.9 111.8-20.1 31.4 54.6 50.8 116.4 55.2 180.9H540V323.2z m0 216.8h167.1c-4.3 65.1-23.3 126.7-54.4 181.2-36.6-11.3-74.3-18.1-112.7-20.3V540z m0 217c27 1.8 53.8 6.3 79.8 13.2-22.8 29.3-49.6 55.7-79.8 78.2V757z m121.6 108.8c-27.5 11.6-55.9 19.9-84.9 24.8 37.4-28.6 70.6-62.7 98.5-101.6 21.9 9.2 43.1 20.3 63.3 33.2-23.8 17.4-49.5 32-76.9 43.6z m204.2-204.3c-19.3 45.7-47 86.7-82.3 122l-0.9 0.9c-24.4-16.9-50.2-31.4-77.2-43.4 34-61.8 53.7-130.1 57.8-201H895c-3 42-12.8 82.7-29.2 121.5z" p-id="4841" :fill="textColor"></path></svg>
              </span>
              <template #overlay>
                <div class="dropdown-menu-item-group">
                  <div class="currency-title">
                    Currency
                  </div>
                  <a-select style="width: 100%;" size="large" class="ant-select" v-model:value="currencyValue"
                    @change="handleCurrencyChange" @click.stop @mousedown.stop
                    :getPopupContainer="(triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement">
                    <a-select-option v-for="item in currencies" :key="item.value" :value="item.value">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                  <a class="common-btn-solid" @click="saveCurrent">Save</a>
                </div>
              </template>
            </a-dropdown>
          </section>
        </a-space>
      </div>

      <!-- 移动端右侧图标组 -->
      <div v-else class="mobile-right">
        <a-space :size="20">
          <SearchOutlined :style="{ fontSize: '22px' }" @click="showSearchDrawer" />
          <ShoppingCartOutlined :style="{ fontSize: '22px' }" @click="goToCart" />
        </a-space>
      </div>
    </section>
  </a-layout-header>

  <!-- 移动端搜索抽屉 -->
  <a-drawer placement="left" :visible="searchDrawerVisible" @close="closeSearchDrawer" :width="320"
    class="search-drawer">
    <div class="search-container">
      <div class="search-header">
        <div class="search-input">
          <SearchOutlined />
          <input type="text" placeholder="SEARCH" v-model="searchKeyword" @input="handleSearch"
            @keyup.enter="handleSearch">
        </div>
        <CloseOutlined @click="closeSearchDrawer" />
      </div>
      <div class="recent-searches" v-if="searchKeyword === ''">
        <h3>RECENT SEARCHES</h3>
        <p v-if="!recentSearches.length">NO RECENT SEARCHES</p>
        <ul v-else>
          <li v-for="search in recentSearches" :key="search">{{ search }}</li>
        </ul>
      </div>
      <div class="search-results" v-else>
        <!-- 搜索结果将在这里显示 -->
      </div>
    </div>
  </a-drawer>

  <!-- 顶部滑入搜索菜单 -->
  <transition name="search-slide">
    <div v-if="searchPanelVisible" class="top-search-panel">
      <div class="top-search-content">
        <div class="top-search-input-wrapper">
          <input class="top-search-input" type="text" v-model="searchText" placeholder="Search products..."
            @keyup.enter="handleSearch" />
          <SearchOutlined class="top-search-btn" @click="handleSearch" style="font-size: 20px;" />
        </div>
        <span class="top-search-close" @click="closeSearchPanel">
          <CloseOutlined style="font-size: 24px;" />
        </span>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ref, onMounted, computed, onUnmounted, getCurrentInstance, reactive, defineComponent, createVNode, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { Modal } from 'ant-design-vue';;
import { useI18n } from 'vue-i18n';
import {
  SearchOutlined,
  ShoppingCartOutlined,
  UserOutlined,
  HeartOutlined,
  CloseOutlined,
  MenuOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useUserStore } from '@/store/user';
import type { MenuProps } from 'ant-design-vue'
import { useCommonStore, useCurrencyStore } from '@/store'
import { Local } from "@/utils/storage.ts";
import mitt from '@/utils/mitt.ts'
import { getToken, removeToken } from '@/utils/auth'
import { getCartList } from '@/api/user';
import Navigation from './Navigation/Navigation.vue'
import { getGoodsClassify } from '@/api/goods'
import { Session } from "@/utils/storage"
import SVG_ICONS from '@/assets/SVG_ICONS';


export default defineComponent({
  name: 'HeaderComponent',
  components: {
    Navigation,
    SearchOutlined,
    ShoppingCartOutlined,
    UserOutlined,
    HeartOutlined,
    CloseOutlined,
    MenuOutlined
  },
  setup() {
    const userInfo = Local.get('user_info');
    const isLogin = ref(!!getToken());
    const router = useRouter();
    const { locale } = useI18n();
    const userStore = useUserStore();
    const route = useRoute();
    const currencyStore = useCurrencyStore();
    const { proxy } = getCurrentInstance();
    let isSticky = ref(false);
    let isNavHover = ref(false);
    let isNavStatus = ref(false);
    let textColor = ref('');
    let currentLogo = ref('');

    // 创建一个函数来处理路径变化和滚动状态的逻辑
    const updateHeaderStyle = () => {
      const isHomePage = window.location.pathname === '/home/index.html' || window.location.pathname === '/';
      
      if (isHomePage) {
        if (isSticky.value) {
          // 主页且滚动状态
          isNavStatus.value = true;
          textColor.value = '#000';
          currentLogo.value = 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530163539/20250530163539_68396ddbb384f.webp';
        } else {
          // 主页且非滚动状态
          isNavStatus.value = false;
          textColor.value = '#fff';
          currentLogo.value = 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530164214/20250530164214_68396f66f3ee6.webp';
        }
      } else {
        // 非主页状态
        currentLogo.value = 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530163539/20250530163539_68396ddbb384f.webp';
        textColor.value = '#000';
      }
    };

    // 监听滚动状态变化
    watch(() => isSticky.value, () => {
      updateHeaderStyle();
    }, { immediate: true });

    // 监听路由变化
    watch(() => route.path, () => {
      updateHeaderStyle();
    }, { immediate: true });

    const currencyValue = ref(currencyStore.currentCurrency?.value ?? 'USD')
    const currencies = computed(() => {
      return currencyStore.currencies;
    })

    const navigationData = ref([])
    const getList = async () => {
      // 先获取缓存数据
      const cachedTabs = Session.get('navigationData')
      if (cachedTabs) {
        navigationData.value = cachedTabs
      } else if (window && (window as any).__INITIAL_INDEX__ && (window as any).__INITIAL_INDEX__.classify) {
        navigationData.value = (window as any).__INITIAL_INDEX__.classify;
        console.log((window as any).__INITIAL_INDEX__, "009")
        // 存入缓存
        Session.set('navigationData', navigationData.value)
      } else {
        const res = await getGoodsClassify()
        if (res.code === 200) {
          navigationData.value = res.result
        }
      }
    }
    getList()

    const visible = ref(false);
    const cartItems = ref<any[]>([]);
    const loading = ref(false);
    const cartVisible = ref(false);
    const pagination = reactive({
      current: 1,
      pageSize: 3,
    });

    // 方法1：使用字符串分割
    const getSize = (str: string) => {
      const parts = str.split(';');
      for (const part of parts) {
        if (part.startsWith('Size:')) {
          return part.replace('Size:', '');
        }
      }
      return '';
    };

    // 计算购物车总价
    const cartTotal = computed(() => {
      return cartItems.value.reduce((sum, item) => {
        const price = parseFloat(item.price);
        const quantity = item.quantity || 1;
        return sum + (price * quantity);
      }, 0);
    });

    const shopCartTotal = ref(0);
    // 获取购物车列表
    const fetchCartList = async () => {
      loading.value = true;
      try {
        const res = await getCartList({
          page: pagination.current,
          page_size: pagination.pageSize
        });

        if (res.code === 200) {
          cartItems.value = res.result.data.map((item: any) => ({
            id: item.id,
            name: item.goods.name,
            specs: item.sku.spec_text,
            price: parseFloat(item.sku.price),
            quantity: item.num,
            size: getSize(item.sku.spec),
            stock: item.sku.stock,
            selected: item.selected === 1,
            image: item.sku.image,
            goods_id: item.goods_id,
            sku_id: item.sku_id,
            num: item.num,
          }));
          shopCartTotal.value = res.result.total_num;
        } else {
          message.error(res.msg || 'Failed To Get The Shopping Cart List');
        }
      } catch (error) {
        console.error('Failed To Get The Shopping Cart List:', error);
        message.error('Failed To Get The Shopping Cart List Please Try Again Later');
      } finally {
        loading.value = false;
      }
    };

    const goToFavourites = () => {
      router.push('/user/wishlist');
    };

    const goToUserInfo = () => {
      router.push('/user/profile');
    };

    const handleCartClick = () => {
      router.push('/user/cart');
    };

    const handleCurrencyChange = (value: any) => {
      currencyValue.value = value
    }

    const isMobile = ref(false);
    const searchDrawerVisible = ref(false);
    const searchKeyword = ref('');
    const recentSearches = ref([]);

    const checkMobile = () => {
      isMobile.value = window.innerWidth <= 768;
    };

    const showSearchDrawer = () => {
      searchDrawerVisible.value = true;
    };

    const closeSearchDrawer = () => {
      searchDrawerVisible.value = false;
      searchKeyword.value = '';
    };

    let searchText = ref('')
    const handleSearch = () => {
      router.push({ name: 'SearchProduct', query: { keyword: searchText.value } })
      searchPanelVisible.value = false
    };

    const goToCart = () => {
      router.push('/cart');
    };

    const showCartPanel = async () => {
      await fetchCartList();
      cartVisible.value = true;
    }

    const navigationRef = ref(null);

    // Add scroll event handler
    const handleScroll = () => {
      const mainElement = document.querySelector("#main");
      const headerElement = document.querySelector("#header");

      if (mainElement && headerElement) {
        const scrollTop = mainElement.scrollTop; // 获取监听指定区域滚动位置的值
        const offsetTop = headerElement.getBoundingClientRect().top + window.scrollY; // 获取固定元素初始滚动位置
        // 判断滚动区域位置是否大于固定元素初始滚动位置
        if (scrollTop > offsetTop) {
          isSticky.value = true; // 开启吸顶效果
        } else {
          isSticky.value = false; // 关闭吸顶效果
        }
      }
    };

    onMounted(() => {
      checkMobile();
      window.addEventListener('resize', checkMobile);

      mitt.on('addShoppingCart', showCartPanel);

      window.addEventListener('user-login-success', () => {
        isLogin.value = true;
        userInfo.value = Local.get('user_info');
        fetchCartList();
      });

      const mainElement = document.querySelector("#main");
      if (mainElement) {
        mainElement.addEventListener('scroll', handleScroll, true);
      }

      if (Local.get('currencies')) {
        setInterval(async () => {
          Local.remove('currencies')
          currencyStore.fetchCurrencies()
        }, 300000)
      } else {
        currencyStore.fetchCurrencies()
      }

      // 初始化购物车数据
      if (isLogin.value) {
        fetchCartList()
      }
    });

    onUnmounted(() => {
      window.removeEventListener('resize', checkMobile);

      window.removeEventListener('user-login-success', () => { });

      const mainElement = document.querySelector("#main");
      if (mainElement) {
        mainElement.removeEventListener('scroll', handleScroll, true);
      }

      mitt.off('addShoppingCart', showCartPanel);
    });

    const saveCurrent = () => {
      const selected = currencies.value.find((c: any) => c.value === currencyValue.value)
      if (selected) {
        currencyStore.setCurrency(selected)
        visible.value = false;
        // router.go(0)
      }
    }

    let visibleDrawer = ref(false);
    const showDrawer = () => {
      visibleDrawer.value = !visibleDrawer.value;
      mitt.emit('showDrawer', visibleDrawer.value);
    };

    const handleLogout = async () => {
      // 退出登录弹出确认框
      Modal.confirm({
        title: 'Are you sure you want to log out?',
        icon: createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          try {
            removeToken();
            userStore.logout();
            isLogin.value = false;
            message.success('Log Out Successfully');
            await router.push('/login');
          } catch (error) {
            // 错误已在请求拦截器中处理
          }
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        onCancel() { },
      });
    };

    const goToLogin = () => {
      router.push('/login');
    };

    const searchPanelVisible = ref(false);

    const openSearchPanel = () => {
      searchPanelVisible.value = true;
      searchText.value = ""
    };
    const closeSearchPanel = () => {
      searchPanelVisible.value = false;
    };

    // Add function to handle hover state change from Navigation component
    const handleNavHover = (hoverState: boolean) => {
      // isNavHover.value = hoverState;
    };

    return {
      userInfo,
      isLogin,
      currencyValue,
      currencies,
      navigationData,
      visible,
      cartItems,
      cartVisible,
      cartTotal,
      shopCartTotal,
      isMobile,
      searchDrawerVisible,
      searchKeyword,
      recentSearches,
      searchText,
      searchPanelVisible,
      visibleDrawer,
      proxy,
      currencyStore,
      goToFavourites,
      goToUserInfo,
      handleCartClick,
      handleCurrencyChange,
      showSearchDrawer,
      closeSearchDrawer,
      handleSearch,
      goToCart,
      saveCurrent,
      showDrawer,
      handleLogout,
      goToLogin,
      openSearchPanel,
      closeSearchPanel,
      isSticky,
      isNavHover,
      navigationRef,
      handleNavHover,
      currentLogo,
      isNavStatus,
      textColor
    }
  }
})
</script>

<style lang="scss" scoped>
:deep(.ant-layout .ant-layout-header) {
  height: 77px !important;
  padding-inline: 0 !important;
  line-height: 77px !important;
}

:deep(.desktop-nav .nav-item) {
  span {
    color: #fff;
  }
}

.header-container {
  width: 100%;
  background: transparent;
  /* Default transparent background */
  box-sizing: border-box;
  padding: 0 !important;
  position: absolute;
  top: 36px;
  z-index: 1000;
  transition: all 0.3s ease;
  height: 77px !important;
  line-height: 77px !important;

  &.header-sticky {
    position: fixed;
    top: 0;
    background-color: #fff;
    /* White background when sticky */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    // Add a subtle animation for better user experience
    animation: slideDown 0.3s ease;
  }

  .header {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    padding: 0 50px;
    /* Keep original padding */
    box-sizing: border-box;

    @media (max-width: 768px) {
      padding: 0 15px;
      /* Keep original mobile padding */
    }
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.search-icon {
  width: 42px;
  position: relative;
  top: -3px;
}

.language-select {
  width: 25px;
}

.logo-container {
  transition: all 0.3s ease;
  width: 200px;
}

.logo-container1 {
  transition: all 0.3s ease;
  width: 200px;
  position: relative;
  left: 40%;
}

.logo {
  color: #1890ff;
  font-size: 20px;
  font-weight: bold;
  flex-shrink: 0;
  text-align: center;
  flex: 1;

  @media (max-width: 768px) {
    img {
      height: 20px;
    }
  }
}

.mobile-menu,
.mobile-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;

  .anticon {
    cursor: pointer;
  }
}

.mobile-menu {
  padding: 10px 0;
}

.mobile-right {
  padding: 10px 0;
}

.search-drawer {
  :deep(.ant-drawer-body) {
    padding: 0;
  }

  .search-container {
    .search-header {
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;

      .search-input {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 15px;

        .anticon {
          margin-right: 10px;
          font-size: 18px;
          color: #999;
        }

        input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 16px;

          &::placeholder {
            color: #999;
          }
        }
      }

      .anticon-close {
        font-size: 18px;
        color: #999;
        cursor: pointer;
      }
    }

    .recent-searches {
      padding: 20px;

      h3 {
        font-size: 12px;
        font-weight: 500;
        color: #999;
        margin-bottom: 15px;
      }

      p {
        color: #666;
        font-size: 13px;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          padding: 8px 0;
          font-size: 13px;
          color: #333;
          cursor: pointer;

          &:hover {
            color: #000;
          }
        }
      }
    }
  }
}

.dropdown-menu-item-group {
  background: #fff;
  padding: 15px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 320px;

  .cart-header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
    letter-spacing: 0.6px;

    >span {
      font-weight: 700;
    }

  }

  .cart-item-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 20px;
  }

  .cart-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;

    .item-image {
      width: 80px;

      img {
        width: 100%;
        height: auto;
      }
    }

    .item-details {
      flex: 1;
      font-size: 12px;

      .item-name {
        font-weight: 700;
        margin-bottom: 5px;
      }

      .item-description {
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .item-size,
      .item-quantity {
        // margin-bottom: px;
      }

      .item-quantity {
        margin-bottom: 8px;
      }

      .item-stock {
        color: #4CAF50;
      }
    }

    .item-price {
      font-weight: 700;
      font-size: 13px;
    }
  }

  .cart-total {
    padding: 15px 0;
    font-size: 13px;

    .total-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;

      >span {
        font-weight: 700;
      }
    }

    .delivery-row {
      font-size: 12px;
      color: #666;
    }
  }

  .cart-actions {
    display: flex;
    gap: 8px;

    a {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .view-bag {
      border: 1px solid #000;
      color: #000;
      background: #fff;

      &:hover {
        background: #f5f5f5;
      }
    }

    .checkout {
      background: #000;
      color: #fff;

      &:hover {
        background: #333;
      }
    }
  }
}

.user-info {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 260px;
  text-align: center;

  .user-info-top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    padding: 20px;
    padding-bottom: 10px;

    >div {
      color: #000;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .user-info-bottom {
    padding: 0 20px 10px 20px;
  }
}

.currency-title {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 16px;
}

.common-btn-solid {
  margin-top: 30px;
}

::v-deep(.ant-select-selector) {
  border-radius: 0 !important;
}

.search-slide-enter-active,
.search-slide-leave-active {
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), opacity 0.35s;
}

.search-slide-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}

.search-slide-enter-to {
  transform: translateY(0);
  opacity: 1;
}

.search-slide-leave-from {
  transform: translateY(0);
  opacity: 1;
}

.search-slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.top-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80px;
  background: #fff;
  z-index: 5000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.top-search-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 24px 40px 0 40px;
  box-sizing: border-box;
}

.top-search-close {
  font-size: 24px;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.top-search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  right: -20px;
}

.top-search-input {
  width: 100%;
  max-width: 1000px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 15px;
  padding: 8px 0;
  outline: none;
  background: transparent;
}

.top-search-btn {
  margin-left: 16px;
  color: #444;
  cursor: pointer;
}

/* Add smooth transition for all navigation elements */
:deep(.nav-container) {
  transition: all 0.3s ease;
}

:deep(.nav-item) {
  transition: color 0.3s ease;

  &:hover {
    color: #000;
  }
}

:deep(.search-icon),
:deep(.anticon) {
  transition: color 0.3s ease;
}
</style>